<template>
  <div id="whiteboard">
    <div class="placeholder"></div>
    <div class="pre-page">
      <span
        class="icon-chevron-left"
        :class="{ forbid: forbidChange || !canPrePage }"
      ></span>
    </div>
    <div class="next-page">
      <span
        class="icon-chevron-right"
        :class="{ forbid: forbidChange || !canNextPage }"
        >></span
      >
    </div>
    <div
      v-if="isTeacher"
      :style="{ left: `${toolsLeft}px` }"
      id="painter-tool"
      class="painter-tools"
    >
      <div class="placeholder"></div>
      <div class="tools-toggle" @click="toolsToggle">
        <template v-if="toolsLeft === toolsDefaultLeft">
          <a-icon type="caret-left" />
        </template>
        <template v-else>
          <a-icon type="caret-right" />
        </template>
      </div>
    </div>
  </div>
</template>

<script>
const toolsDefaultLeft = -30;
export default {
  components: {},
  data() {
    return {
      white: null,
      toolbar: null,
      isTeacher: false,
      canPrePage: false,
      canNextPage: false,
      pageData: null,
      forbidChange: false,
      toolsLeft: toolsDefaultLeft,
      toolsDefaultLeft: toolsDefaultLeft
    };
  },
  computed: {},
  watch: {},
  methods: {
    setPageAuth() {
      var prePage = $(".icon-chevron-left");
      var nextPage = $(".icon-chevron-right");

      if (this.canPrePage) {
        prePage.addClass("has-page");
      } else {
        prePage.removeClass("has-page");
      }
      if (this.canNextPage) {
        nextPage.addClass("has-page");
      } else {
        nextPage.removeClass("has-page");
      }
    },
    toolsToggle() {
      this.toolsLeft =
        this.toolsLeft === toolsDefaultLeft
          ? -($("#painter-tool").width() + Math.abs(toolsDefaultLeft))
          : toolsDefaultLeft;
    }
  },
  created() {
    this.isTeacher = BJY.auth.isTeacher();
    this.pageData = BJY.data.page;
    this.canPrePage = this.pageData.getClientPage() > 0;
    this.canNextPage = this.pageData.getClientPage() < this.pageData.getMaxPage;
  },
  mounted() {
    var eventEmitter = BJY.eventEmitter;
    var element = $("#whiteboard");

    // 文档白板
    this.white = BJY.Whiteboard.create({
      element: element.find(".placeholder"),
      fit: 1 // 1 自适应  2 撑满容器
    });

    this.setPageAuth();

    // 白板工具事件
    element.find(".pre-page").on("click", () => {
      if (this.canPrePage && !this.forbidChange) {
        eventEmitter.trigger(eventEmitter.PAGE_PREV_TRIGGER);
      }
    });

    element.find(".next-page").on("click", () => {
      if (this.canNextPage && !this.forbidChange) {
        eventEmitter.trigger(eventEmitter.PAGE_NEXT_TRIGGER);
      }
    });

    eventEmitter
      .on(eventEmitter.WHITEBOARD_LAYOUT_CHANGE, (e, data) => {
        // 重新设置白板的高度并让其居中
      })
      .on(eventEmitter.CLIENT_PAGE_CHANGE, () => {
        console.log("客户端翻页");
      })
      .on(eventEmitter.PAGE_CHANGE_END, (e, data) => {
        var currentPage = this.pageData.getClientPage();
        var maxPage = this.pageData.getMaxPage();

        if (currentPage > 0) {
          this.canPrePage = true;
        } else {
          this.canPrePage = false;
        }
        if (currentPage < maxPage) {
          this.canNextPage = true;
        } else {
          this.canNextPage = false;
        }
        this.setPageAuth();
      })
      .on(eventEmitter.STUDENT_PPT_AUTH_CHANGE, (e, data) => {
        console.log(data.forbid);
        this.forbidChange = data.forbid;
      });
    // 白板画笔
    this.toolbar = BJY.PainterToolBar.create({
      // DOM 父元素
      element: element.find("#painter-tool .placeholder"),
      replace: true,
      // 是否水平放置
      isVertical: false,
      // 是否使用选择工具
      canUseSelectTool: true,
      //是否使用粉笔工具
      canUsePencilTool: true,
      //是否使用图形工具
      canUseShapeTool: true,
      //是否使用文本工具
      canUseFontTool: true,
      //是否有调色板
      canUsePaletteTool: true,
      //是否使用删除键
      canUseDeleteTool: true,
      //是否使用激光笔
      canUsePointTool: true
    });
  },
  beforeDestroy() {
    this.white && this.white.$destroy && this.white.$destroy();
    this.toolbar && this.toolbar.$destroy && this.toolbar.$destroy();
  }
};
</script>

<style lang="less">
//@import url(); 引入公共css类
/*白板样式*/
#whiteboard {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 30px;
  right: 30px;

  /*白板工具*/
  .next-page,
  .pre-page {
    position: absolute;
    width: 30px;
    top: 0;
    bottom: 0;
    transition: background-color 0.5s;
    color: transparent;

    .forbid:hover {
      cursor: not-allowed;
    }
  }
  .pre-page {
    left: -30px;
  }
  .next-page {
    right: -30px;
  }
  .pre-page:hover {
    background-color: rgba(0, 0, 0, 0.4);
  }
  .next-page:hover {
    background-color: rgba(0, 0, 0, 0.4);
  }
  .icon-chevron-left,
  .icon-chevron-right {
    font-size: 40px;
    position: absolute;
    top: 50%;
    margin-top: -25px;
    color: #fff;
  }
  .has-page {
    cursor: pointer;
  }

  // 画笔工具

  .painter-tools {
    position: absolute;
    transition: left 0.3s;
    bottom: 25px;
    left: 0;
    .tools-toggle {
      position: absolute;
      display: flex;
      padding: 0 4px;
      align-items: center;
      height: 100%;
      right: -20px;
      top: 0px;
      cursor: pointer;
      background-color: #f8f8f8;
      box-shadow: inset 2px 0 6px rgba(0, 0, 0, 0.15);
      border-radius: 0 3px 3px 0;
      background-image: radial-gradient(
        at center center,
        rgb(250, 250, 250) 0%,
        rgb(217, 217, 217) 100%
      );
      &:hover {
        background-image: linear-gradient(to bottom, #fff, #f8f8f8);
        background-repeat: repeat-x;
      }
    }
  }
}
</style>
